{extend name='table'}

{block name="button"}
<!--{if auth("add")}-->
<button data-modal='{:url("add")}' data-table-id="StoreTable" class='layui-btn layui-btn-sm layui-btn-primary'>
    <i class='layui-icon layui-icon-add-1'></i> 添加门店
</button>
<!--{/if}-->

<!--{if auth("state")}-->
<button data-action='{:url("state")}' data-table-id="StoreTable" data-rule="id#{key};status#1" class='layui-btn layui-btn-sm layui-btn-primary'>
    <i class='layui-icon layui-icon-check'></i> 启用门店
</button>
<button data-action='{:url("state")}' data-table-id="StoreTable" data-rule="id#{key};status#0" class='layui-btn layui-btn-sm layui-btn-primary'>
    <i class='layui-icon layui-icon-close'></i> 禁用门店
</button>
<!--{/if}-->

<!--{if auth("remove")}-->
<button data-action='{:url("remove")}' data-table-id="StoreTable" data-rule="id#{key}" class='layui-btn layui-btn-sm layui-btn-primary'>
    <i class='layui-icon layui-icon-delete'></i> 删除门店
</button>
<!--{/if}-->
{/block}

{block name="content"}
<div class="layui-card-body">
    <!-- 搜索表单 -->
    <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-inline">
                <input name="name" value="{:input('name')}" placeholder="请输入门店名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">门店编码</label>
            <div class="layui-input-inline">
                <input name="code" value="{:input('code')}" placeholder="请输入门店编码" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input name="phone" value="{:input('phone')}" placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">门店状态</label>
            <div class="layui-input-inline">
                <select name="status" class="layui-select">
                    <option value="">-- 全部 --</option>
                    {foreach $statusMap as $k=>$v}
                    <option value="{$k}" {eq name='$k' value='input("status")'}selected{/eq}>{$v}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"></i> 搜索</button>
            <button class="layui-btn layui-btn-primary" type="button" data-reload><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
        </div>
    </form>
    
    <!-- 数据表格 -->
    <table id="StoreTable" data-url="{:request()->url()}" data-target-search="form.form-search"></table>
</div>
{/block}

{block name="script"}
<script>
    $(function () {
        $('#StoreTable').layTable({
            sort: {field: 'sort desc,id', type: 'desc'},
            cols: [[
                {checkbox: true, fixed: 'left'},
                {field: 'id', title: 'ID', width: 80, align: 'center'},
                {field: 'name', title: '门店名称', minWidth: 150},
                {field: 'code', title: '门店编码', width: 120, align: 'center'},
                {field: 'contact', title: '联系人', width: 100, align: 'center'},
                {field: 'phone', title: '联系电话', width: 130, align: 'center'},
                {field: 'address', title: '门店地址', minWidth: 200},
                {field: 'sort', title: '排序', width: 80, align: 'center'},
                {field: 'status', title: '状态', width: 100, align: 'center', templet: '#StatusTpl'},
                {field: 'create_time', title: '创建时间', width: 160, align: 'center'},
                {toolbar: '#toolbar', title: '操作', width: 200, align: 'center', fixed: 'right'}
            ]]
        });
    });
</script>

<!-- 状态模板 -->
<script type="text/html" id="StatusTpl">
    {{# if(d.status == 1){ }}
    <span class="layui-badge layui-bg-green">正常</span>
    {{# }else{ }}
    <span class="layui-badge layui-bg-gray">禁用</span>
    {{# } }}
</script>

<!-- 操作按钮模板 -->
<script type="text/html" id="toolbar">
    {if auth('edit')}
    <a class="layui-btn layui-btn-sm" data-title="编辑门店" data-modal='{:url("edit")}?id={{d.id}}'>编辑</a>
    {/if}
    {if auth('remove')}
    <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除这个门店吗？" data-action="{:url('remove')}" data-value="id#{{d.id}}">删除</a>
    {/if}
</script>
{/block}

